<template>
    <div class="hello">
        <hheader :mheader="mheader"></hheader>
        <div class="column is-12">
            <label class="label" for="email" @click="gb()">{{number|tse}}</label>
            <div class="layui-block">
                <input v-model="number" v-validate="'required|digits:10'" :class="{'input': true, 'is-danger': errors.has('number') }" type="text" name="number" class="layui-input" placeholder="长度为10的数据">
                <span v-show="errors.has('number')" class="text-style" v-cloak> {{ errors.first('number') }} </span>
            </div>
            <div class="layui-block">
                <input v-model="name" v-validate="'required|min:3|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" name="name" class="layui-input" placeholder="账户">
                <span v-show="errors.has('name')" class="text-style" v-cloak> {{ errors.first('name') }} </span>
            </div>
            <button type="button" v-dbClick @click="test">点击</button>
            <div class="layui-block" @click="gb1()" v-dbClick>
                <input v-model="phone" v-validate="'required|digits:10'" :class="{'input': true, 'is-danger': errors.has('phone') }" type="text" name="phone" class="layui-input" placeholder="手机">
                <span v-show="errors.has('phone')" class="text-style" v-cloak> {{ errors.first('phone') }} </span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "HelloWorld",
    data() {
        return {
            number: "",
            name: "",
            phone: "",
            mheader: {}
        };
    },
    methods: {
        gb() {
            console.log("点击");
            this.$basic.hToast("提示");
            this.$store.dispatch("hvuex", { w: 1111, h: 555 });
        },
        gb1() {
            console.log("...........................................点击");
            //this.$basic.hToast("提示");
            this.$store.dispatch("hvuex", { w: 2222, h: 666 });
        },
        test() {
            console.log("测试点击");
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
    font-weight: normal;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: inline-block;
    margin: 0 10px;
}
a {
    color: #42b983;
}
</style>
